import React, {
    Component
} from 'react'
import {
    StyleSheet,
    View,
    Dimensions,
    ListView,
    Image,
    Text,
    TouchableOpacity,
    ScrollView,
    Platform
} from 'react-native'
import { MtContainer, MtChar,  MtNavBar, MtScreen, MtButton } from 'martian-ui';
const { MtW1, MtW3, MtL3, MtLabel } = MtChar;
const WINDOW_WIDTH = MtScreen.width;
const WINDOW_HEIGHT = MtScreen.height;
import CircleView from '../../components/CircleView';
import { Switch } from 'react-native-switch';
import BoxShadowYaGuan from '../../components/common/BoxShadowYaGuan';
const { width, height } = Dimensions.get('window');
import {fetchDeviceDetailById, controlDevice } from '../../action/girlAction';
import { bindActionCreators } from 'redux';
import {connect} from 'react-redux';
const EntityLabels = require('../../constants/entities');
import assign from 'lodash/assign';
import NavigationBar from '../../components/common/NavigationBar'

class GasAlarm extends Component {
    constructor(props) {
        super(props)
        // 初始状态
        this.state = {

        }

    }
  componentWillMount() {
    const { fetchDeviceDetailById,  deviceId} = this.props;
    fetchDeviceDetailById(deviceId);
    this.convertPropsToStates(this.props);

  }
  convertPropsToStates(props) {
    const {devicesEntities, deviceId} = props;
    const device = devicesEntities[deviceId];
    if(device && device.status){
      if(device.status.smokeAlarm === '1'){
        this.setState({
          value: true,
        })
      }else {
        this.setState({
          value: false,
        })}
    }



    const newState = assign({
      device
    });

    if (newState) {
      this.setState(newState);
    }
  }

  componentWillReceiveProps(nextProps) {
    this.convertPropsToStates((nextProps));
  }

  controlAir(params){
    const {controlDevice, deviceId} = this.props;
    controlDevice(params, deviceId);
  }
    render() {
        const {navigator} =this.props;
        const {value} = this.state;
        return(
            <MtContainer>
                <NavigationBar
                  title={'烟雾报警器'}
                  statusBar={{backgroundColor: '#F4F4F4', barStyle: 'dark-content'}}
                  navigator={navigator}
                  style={{backgroundColor: '#F4F4F4'}}
                />
                <ScrollView style={{ flex: 1}}>
                    <View style={{justifyContent: 'center', alignItems: 'center' }}>

                        <BoxShadowYaGuan
                            containerStyle={{ marginTop: 30}}
                            width={width-30}
                            height={100}
                            renderItem={()=>{
                                return (
                        <View style={{
                            width:WINDOW_WIDTH-30,
                            alignItems:'center',
                            flexDirection: 'row',
                            paddingVertical: 40,
                            paddingLeft: 15,
                            height: 100,
                            backgroundColor:'#fff'
                        }}>
                            <MtLabel style={{
                                fontWeight: 'bold',
                                flex: 1
                            }}>煤气报警</MtLabel>
                            <MtL3 style={{ marginRight: 15}}>{value? '监测中..':'已停止'}</MtL3>
                        </View>)}}
                        />
                    </View>
                </ScrollView>

                    <View style={{justifyContent: 'center', alignItems: 'center'}}>
                        <MtButton
                            containerStyle={{
                                borderRadius: 12,
                                width: 200,
                                height: 44,
                                backgroundColor: '#35B8AC'
                            }}

                            onPress={() => {
                                this.setState({value: !value});
                                const newAirParams = {'SmokeAlarm': value?'0':'1'}
                                this.controlAir(newAirParams);
                            }}
                        >
                          { value?'关闭':'开启'}
                        </MtButton>
                    </View>
            </MtContainer>


        )

    }

}

function mapDispatchToProps(dispatch) {
  const actions = {
    fetchDeviceDetailById,
    controlDevice
  };
  return bindActionCreators(actions, dispatch);
}

function mappingStateToProps(state, ownProps) {
  const entities= state['entities'];
  const devicesEntities = entities[EntityLabels.devices];
  return {
    devicesEntities,
  }
}

module.exports = connect(mappingStateToProps, mapDispatchToProps)(GasAlarm);


const styles = StyleSheet.create({
    subtitle:{
        fontWeight: 'bold',
        alignItems:'center', // 必须设置,否则换行不起作用
        paddingVertical: 40,
        paddingLeft: 20,
    },
    plusDelBtn1:{

        fontWeight: 'bold',

        alignItems: 'center',
        fontSize: 24,
        marginRight: 25,

    },
    plusDelBtn2:{
        marginLeft: WINDOW_WIDTH/2 + 10,
        fontWeight: 'bold',
        alignItems: 'center',

        fontSize: 24

    },
    iconStyle:{
        width:150,
        height:164,
    },

    buttonContainer: {
        flex: 1,
        marginRight: 10,
        alignItems: 'flex-end',
    },
})
